<script setup lang="ts">
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import { getHomeBannerAPI, getHomeCategoryAPI, getHotPanelAPI } from '@/service/home'
import type { BannerItem, CategoryItem, HotPanelItem } from '@/types/home'
import { onLoad, onReady } from '@dcloudio/uni-app'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import type { CustomNavbarInstance, XtxGuessInstance } from '@/types/components'
import PageSkeleton from './components/PageSkeleton.vue'
// 轮播图
const bannerList = ref<BannerItem[]>([])
const getHomeBanner = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}
// 商品分类
const categoryList = ref<CategoryItem[]>([])
const getCategoryList = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}
// 热门推荐
const hotPanelList = ref<HotPanelItem[]>([])
const getHotPanelList = async () => {
  const res = await getHotPanelAPI()
  hotPanelList.value = res.result
}

const guessRef = ref<XtxGuessInstance>()
// 获取滚动页面的大小
const navBarRef = ref<CustomNavbarInstance>()
const heightNav = ref(0)
const heightScroll = ref(0)
onReady(async () => {
  const res = await uni.getWindowInfo()
  // 获取navBar的高度
  // const el = navBarRef.value?.clientHeight
  // 让scroll-view页面能滚动
  uni
    .createSelectorQuery()
    .select('.nav-bar')
    .boundingClientRect((rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
      if (!(rect instanceof Array)) {
        heightNav.value = navBarRef.value?.safeArea ?? 0 + (rect.height as number)
      }
    })
    .exec()
  heightScroll.value = res.windowHeight - heightNav.value
})
// 滚动触底事件
const onScrollToLower = () => {
  guessRef.value?.getguessLike()
}
// 是否开启刷新的状态 默认不开启
const isTriggered = ref(false)
// 是否正在加载
const isLoading = ref(false)
// 下拉刷新触发的事件
const onRefresherrefresh = async () => {
  isTriggered.value = true
  guessRef.value?.resetData()
  await Promise.all([
    getHomeBanner(),
    getCategoryList(),
    getHotPanelList(),
    guessRef.value?.getguessLike(),
  ])
  isTriggered.value = false
}

onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBanner(), getCategoryList(), getHotPanelList()])
  isLoading.value = false
})
</script>

<template>
  <CustomNavbar ref="navBarRef" class="nav-bar" />
  <PageSkeleton v-if="isLoading" />
  <template v-else>
    <scroll-view
      scroll-y
      @scrolltolower="onScrollToLower"
      class="scroll-view"
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="onRefresherrefresh"
      :style="{ height: heightScroll + 'px' }"
    >
      <XtxSwiper :bannerList="bannerList" />
      <CategoryPanel :categoryList="categoryList" />
      <HotPanel :hotPanelList="hotPanelList" />
      <XtxGuess ref="guessRef" />
    </scroll-view>
  </template>
</template>

<style lang="scss" scoped>
.scroll-view {
  // flex: 1;
  // height: calc(100% - 375px);
  height: 100%; //这个也可以
}
</style>
